<template>
  <div>
    <template v-if="typeStatus==1" >
      <template v-if="cardListData.length > 0">
        <a-list
          :grid="{gutter: 24, lg: 4, md: 3, sm: 2, xs: 1}"
          :dataSource="cardListData">
          <a-list-item slot="renderItem" slot-scope="item" class="caritem">
            <slot name="cardCont" :item="item"></slot>
          </a-list-item>
        </a-list>
      </template>
      <template v-else>
        {{ $t('message.noData') }}
      </template>
    </template>
    <template v-else>
      <template v-if="cardListData.length > 0">
        <a-list
          :grid="{gutter: 24, lg: 4, md: 3, sm: 2, xs: 1}"
          :dataSource="cardListData">
          <a-list-item slot="renderItem" slot-scope="item" class="caritem">
            <template v-if="item === null">
              <slot name="cardAdd"></slot>
            </template>
            <template v-else>
              <slot name="cardCont" :item="item"></slot>
            </template>
          </a-list-item>
        </a-list>
      </template>
    </template>
  </div>
</template>
<script>
// 注意参数
// typeStatus 1 无添加
// typeStatus  2  传参 cardList.push(null) 有添加
export default {
  name: 'CardList',
  props: {
    cardListData: {
      type: Array,
      default: () => { return [] }
    },
    typeStatus: {
      type: Number,
      default: 1
    }
  },
  data () {
    return {
    }
  }
}
</script>
